<template>
    <div class="home">
        <mt-header :title="longTitle">
            <router-link to="/ShopPhoto" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <process :tocolor="tocolor"></process>
        <ShowList :entryData="companyAddress" @showList="showList"></ShowList>
        <ShowListInput :needData="needData" :placeholder="placeholder" @inputChange="inputChange"
                       :inputValue="shopRoadValue"></ShowListInput>
        <ShowListInput :needData="shopHouse" :placeholder="shopHousePlaceholder" @inputChange="shopHouseChange"
                       :inputValue="shopHouseValue"></ShowListInput>
        <!--<ShowList :entryData="industry" class="marB-5" @showList="showList"></ShowList>-->
        <ShowList :entryData="auxiliary" class="marB-5" @showList="showList"></ShowList>

        <com-button btnClass="next-btn"
                    @btn-click="goTo"
                    :disabled="nextBtnDisabled">下一步
        </com-button>
        <Popup :popupVisible="popupVisible" @change='change'>
            <picker @cancel="cancel" :ChooseName="ChooseName" :slotData="slotData" @companyName="companyName"></picker>
        </Popup>
    </div>
</template>

<script>
    import ShowList from '@/components/ShowList.vue'
    import ShowListInput from '@/components/ShowListInput.vue'
    import MyButton from '@/components/MyButton.vue'
    import Popup from '@/components/Popup.vue'
    import picker from '@/components/picker.vue'
    import process from '@/components/process.vue'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {Header} from 'mint-ui';
    import {Toast} from 'mint-ui';
    import router from '@/router';

    import {
        GET_SHOP_ROAD, COMPANYADDRESS_NEXT_BUTTON_CHECK, COMPANYADDRESS_SELECT_CANCLE,
        COMPANYADDRESS_SELECT_CHANGE, GET_SHOP_HOUSE_CHANGE, COMPANYADDRESS_GET_INPUT_VALUE,
        COMPANYADDRESS_SHOW_SELECT_LIST
    } from '../store/types'
    import ComButton from '@/components/com-button.vue'
    import util from '../lib/util'


    export default {
        name: "companyAddress",
        components: {
            ShowList,
            ShowListInput,
            MyButton,
            Popup,
            picker,
            process,
            Header,
            ComButton
        },
        data() {
            return {
                ButtonNext: '下一步',
                tocolor: {color: '#2dbbfd'},
                longTitle: '店铺信息验证'
            }
        },
        computed: {
            ...mapState('companyAddress', ['popupVisible', 'ChooseName', 'needData', 'OppName',
                'placeholder', 'companyAddress', 'industry', 'auxiliary', 'Other',
                'slotData', 'shopRoadValue', 'nextBtnDisabled', 'shopHouse', 'shopHousePlaceholder', 'shopHouseValue',
                'areaList', 'allAreaList', 'areaCode'])
        },
        mounted() {
            this.GET_SHOP_ROAD()
            this.COMPANYADDRESS_NEXT_BUTTON_CHECK()

        },
        methods: {
            ...mapMutations('companyAddress', [COMPANYADDRESS_SHOW_SELECT_LIST, COMPANYADDRESS_SELECT_CANCLE,
                COMPANYADDRESS_SELECT_CHANGE,
                GET_SHOP_HOUSE_CHANGE, COMPANYADDRESS_GET_INPUT_VALUE, COMPANYADDRESS_NEXT_BUTTON_CHECK]),
            ...mapActions('companyAddress', [GET_SHOP_ROAD],),
            showList: function (value) {
                this.COMPANYADDRESS_SHOW_SELECT_LIST(value)
            },
            cancel() {
                this.COMPANYADDRESS_SELECT_CANCLE()
            },
            change() {
                this.COMPANYADDRESS_SELECT_CHANGE()
            },
            companyName: function (value) {
                if (this.OppName == "companyAddress") {
                    this.companyAddress[0].choose = value.join("-")
                    console.log(this.companyAddress[0].choose)
                    // console.log(this.allAreaList)
                    // console.log(this.allAreaList[0].AREADetail.AREANAME)
                    for (let i = 0; i < this.areaList.length; i++) {
                        {
                            if (this.allAreaList[i].AREADetail.AREANAME == this.companyAddress[0].choose) {
                                this.$store.state.companyAddress.areaCode = this.allAreaList[i].AREADetail.AREACODE
                            }
                        }
                        this.COMPANYADDRESS_NEXT_BUTTON_CHECK()
                    }
                    // console.log(this.areaCode)
                } else if (this.OppName == "industry") {
                    this.industry[0].choose = value.join("-")
                    this.COMPANYADDRESS_NEXT_BUTTON_CHECK()
                }
            },
            inputChange(value) {
                this.COMPANYADDRESS_GET_INPUT_VALUE(value)
                this.COMPANYADDRESS_NEXT_BUTTON_CHECK()
            },
            shopHouseChange(value) {
                this.GET_SHOP_HOUSE_CHANGE(value)
                this.COMPANYADDRESS_NEXT_BUTTON_CHECK()
            },
            goTo() {
                if (util.getInputLength(this.shopRoadValue) > 20) {
                    Toast("营业地址路名不能超过10个字")
                    return false
                } else if (util.getInputLength(this.shopHouseValue) > 12) {
                    Toast("营业地址门牌不能超过6个字")
                    return false
                }
                router.push('merchantAccount')
            }
        }
    }
</script>

<style scoped>
    .marB-5 {
        margin-bottom: 5px;
    }

    .home {
        background-color: #eff0f1;
        width: 100%;
        height: 400px;
    }
</style>